import { Button, InputNumber } from "antd";
import { useState, useReducer } from "react";


const UseReducerPage = () => {
    const reducer = (state, action) => {
        switch (action.type) {
            case 'INC':
                return state + 1;
            case 'DEC':
                return state ? state - 1 : 0;
            case "UPDATE":
                return state = action.payload
            default:
                break;
        }
    }
    const [inputValue, setInputValue] = useState(0);
    const [state, dispatch] = useReducer(reducer, 0)
    return (
        <>
            <div className="flex">
                <Button onClick={() => dispatch({ "type": "INC" })}>+</Button>
                <div className="w-16 text-center">{state}</div>
                <Button onClick={() => dispatch({ "type": "DEC" })}>-</Button>
            </div>
            <div>

                <InputNumber min={0} max={100000} value={inputValue} onChange={(event) => { setInputValue(event) }} />
                <Button onClick={() => dispatch({ "type": "UPDATE", "payload": inputValue })}>Update</Button>
            </div>
        </>
    )
}
export default UseReducerPage;